<template>
	<div class="block">
		<div class="user-header rounded-sm text-center">
			<div class="pt-3 mx-auto avatar-box">
				<ma-upload v-model="userInfo.avatar" return-type="url" rounded />
			</div>
			<div>
				<a-tag size="large" class="mt-3 rounded-full" color="#165dff">
					{{ (userStore.user && userStore.user.nickname) || (userStore.user && userStore.user.username) }}
				</a-tag>
			</div>
		</div>

		<a-layout-content class="block lg:flex lg:justify-between">
			<div class="ma-content-block w-full lg:w-6/12 mt-3 p-4">
				<a-tabs type="rounded">
					<a-tab-pane key="info" title="个人资料">
						<user-infomation />
					</a-tab-pane>
					<a-tab-pane key="safe" title="安全设置">
						<modify-password />
					</a-tab-pane>
				</a-tabs>
			</div>
			<div class="ma-content-block w-full lg:w-6/12 mt-3 p-4 ml-0 lg:ml-3">
				<a-tabs type="rounded">
					<a-tab-pane key="login-log" title="登录日志">
						<a-timeline class="pl-5 mt-3" v-if="loginLogList && loginLogList.length">
							<a-timeline-item :label="`地理位置；${item.ip_location}，操作系统：${item.os}`" v-for="(item, idx) in loginLogList" :key="idx">
								您于 {{ item.login_time }} 登录系统，{{ item.message }}
							</a-timeline-item>
						</a-timeline>
						<a-empty v-else />
					</a-tab-pane>
					<a-tab-pane key="operation-log" title="操作日志">
						<a-timeline class="pl-5 mt-3" v-if="operationLogList && operationLogList.length">
							<a-timeline-item :label="`地理位置；${item.ip_location}，方式：${item.method}，路由：${item.router}`" v-for="(item, idx) in operationLogList" :key="idx">
								您于 {{ item.create_time }} 执行了 {{ item.service_name }}
							</a-timeline-item>
						</a-timeline>
						<a-empty v-else />
					</a-tab-pane>
				</a-tabs>
			</div>
		</a-layout-content>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import MaUpload from '@cps/ma-upload/index.vue'
import { useUserStore } from '@/store'
import { Message } from '@arco-design/web-vue'
import user from '@/api/system/user'
import commonApi from '@/api/common'

import ModifyPassword from './components/modifyPassword.vue'
import UserInfomation from './components/userInfomation.vue'

const userStore = useUserStore()
const userInfo = reactive({
	...userStore.user,
})

const loginLogList = ref([])
const operationLogList = ref([])

const requestParams = reactive({
	limit: 5,
})

onMounted(() => {
	commonApi.getLoginLogList(Object.assign(requestParams, { orderBy: 'login_time', orderType: 'desc' })).then((res) => {
		loginLogList.value = res.data.data
	})

	commonApi.getOperationLogList(Object.assign(requestParams, { orderBy: 'create_time', orderType: 'desc' })).then((res) => {
		operationLogList.value = res.data.data
	})
})

userInfo.avatar = userStore?.user?.avatar ?? undefined

watch(
	() => userInfo.avatar,
	async (newAvatar) => {
		if (newAvatar) {
			const response = await user.updateInfo({ avatar: newAvatar })
			if (response.code === 200) {
				Message.success('头像修改成功')
				userStore.user.avatar = newAvatar
			}
		}
	}
)
</script>
<script>
export default { name: 'userCenter' }
</script>

<style scoped>
.avatar-box {
	width: 130px;
}
.user-header {
	width: 100%;
	height: 200px;
	background: url('@/assets/userBanner.jpg') no-repeat;
	background-size: cover;
}
</style>
